<template>
    <transition name="modal">
        <div class="lg-modal" v-if="isModal">
            <div class="lg-modal-head">
                <p class="modal-name">{{title}}</p>
                <img src="@/assets/images/关闭.png" class="guanbi" @click="closeModal">
            </div>
            <div class="lg-modal-main">
                <slot></slot>
            </div>
        </div>
    </transition>

</template>

<script setup>
import {defineProps,defineEmits} from 'vue';

const props=defineProps({
    title:{
        default:'标题'
    },
    isModal:{
        default:false
    }
});
const emit=defineEmits(['close']);
function closeModal(){
    emit('close')
} 

props

</script>

<style lang="less" scoped>
@import url(/src/styles/commons.less);
.modal{
    //入场
    &-enter{
        &-from{
            transform: translateX(360px);
        }
        &-active{
            transition: @tr;
        }
        &-to{
            transform: translateX(0px);
        }
    }
    //出场
    &-leave{
        &-from{
            transform: translateX(0px);
        }
        &-active{
            transition: @tr;
        }
        &-to{
            transform: translateX(360px);
        }
    }
}



.lg-modal{
    width: 360px;
    height:100%;
    position: fixed;
    right: 0;
    top: 52px;
    z-index: 1000;
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08);
    backdrop-filter: blur(20px);
    
    .lg-modal-head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;

        .modal-name{
            font-size: 16px;
            color: @gray-1;
            font-weight: 600;
        }
        .guanbi{
            width: 21px;
            height: 20px;
            cursor: pointer;
        }
    }
    .lg-modal-main{
        // border: 1px solid #eee;
        height: 100%;
        overflow-y:auto ;
        overflow-x:auto ;
        margin: 2px;
        padding-bottom: 116px;
        box-sizing: border-box;
    }
    .slot{
        height: 1200px;
        background: #eee;
    }
    .lg-modal-main::-webkit-scrollbar{
        //滚动条整体样式（滚动条的高和宽）
        width: 4px;
        height: 4px;
    }
    .lg-modal-main::-webkit-scrollbar-thumb{
        //滚动条里面的小方块
        border-radius: 4px;
        background: rgba(0,0,0,0.2);
    }
    .lg-modal-main::-webkit-scrollbar-track{
        //滚动条里面的轨道
        border-radius: 4px;
         background: rgba(0,0,0,0);
    }
}

</style>